<script setup lang="ts">
import { useRouter } from "vue-router";
import LoginHeader from "./components/LoginHeader.vue";
import PasswordLoginForm from "./components/PasswordLoginForm.vue";
import PhoneLoginForm from "./components/PhoneLoginForm.vue";
import ScanLoginForm from "./components/ScanLoginForm.vue";
import SocialLogin from "./components/SocialLogin.vue";
import LoginFooter from "./components/LoginFooter.vue";

// 定义类型
type LoginType = "password" | "phone" | "scan";
type SocialLoginType = "wechat" | "qq" | "email";
interface PasswordForm {
  username: string;
  password: string;
}
interface PhoneForm {
  phone: string;
  code: string;
}

// 登录状态管理
const activeLoginType = ref<LoginType>("password"); // 默认密码登录
const loginLoading = ref<boolean>(false);

// 表单组件引用
const passwordFormRef = ref<InstanceType<typeof PasswordLoginForm> | null>(
  null
);
const phoneFormRef = ref<InstanceType<typeof PhoneLoginForm> | null>(null);
const router = useRouter();
// 处理标签切换
const handleTabChange = (tabName: LoginType) => {
  // 重置表单状态
  if (tabName === "password" && passwordFormRef.value) {
    passwordFormRef.value.clearValidate();
  } else if (tabName === "phone" && phoneFormRef.value) {
    phoneFormRef.value.clearValidate();
  }
};

// 处理密码登录
const handlePasswordLogin = (formData: PasswordForm, remember: boolean) => {
  loginLoading.value = true;

  // 模拟登录请求
  setTimeout(() => {
    // 处理记住密码
    if (remember) {
      localStorage.setItem("savedUserInfo", JSON.stringify(formData));
    } else {
      localStorage.removeItem("savedUserInfo");
    }

    ElMessage.success("登录成功");
    loginLoading.value = false;

    // 这里可以添加路由跳转逻辑
    router.push("/chat");
  }, 1500);
};

// 处理手机登录
const handlePhoneLogin = (_formData: PhoneForm) => {
  loginLoading.value = true;

  // 模拟登录请求
  setTimeout(() => {
    ElMessage.success("登录成功");
    loginLoading.value = false;

    // 这里可以添加路由跳转逻辑
    router.push("/chat");
  }, 1500);
};

// 处理获取验证码
const handleGetCode = (phone: string) => {
  // 实际项目中这里应该调用后端接口发送验证码
  console.log("发送验证码到:", phone);
};

// 刷新二维码
const refreshQrcode = () => {
  // 实际项目中这里应该重新获取二维码
  console.log("刷新二维码");
};

// 切换到密码登录
const switchToPasswordLogin = () => {
  activeLoginType.value = "password";
};

// 处理社交登录
const handleSocialLogin = (type: SocialLoginType) => {
  loginLoading.value = true;

  // 模拟社交登录
  setTimeout(() => {
    const typeMap = {
      wechat: "微信",
      qq: "QQ",
      email: "邮箱",
    };
    ElMessage.success(`${typeMap[type]}登录成功`);
    loginLoading.value = false;

    // 这里可以添加路由跳转逻辑
    router.push("/chat");
  }, 1500);
};
</script>

<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration"></div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- 登录头部 -->
      <LoginHeader title="DeepSeek-Chat" description="请使用账号登录" />

      <!-- 登录方式切换 -->
      <el-tabs
        v-model="activeLoginType"
        class="login-tabs"
        @tab-change="handleTabChange"
      >
        <!-- 密码登录 -->
        <el-tab-pane name="password" label="密码登录">
          <PasswordLoginForm
            :loading="loginLoading"
            ref="passwordFormRef"
            @login="handlePasswordLogin"
          />
        </el-tab-pane>

        <!-- 手机登录 -->
        <el-tab-pane name="phone" label="手机登录">
          <PhoneLoginForm
            :loading="loginLoading"
            ref="phoneFormRef"
            @login="handlePhoneLogin"
            @getCode="handleGetCode"
          />
        </el-tab-pane>

        <!-- 扫码登录 -->
        <el-tab-pane name="scan" label="扫码登录">
          <ScanLoginForm
            @refresh="refreshQrcode"
            @switchToPassword="switchToPasswordLogin"
          />
        </el-tab-pane>
      </el-tabs>

      <!-- 其他登录方式 -->
      <SocialLogin @login="handleSocialLogin" />

      <!-- 底部链接 -->
      <LoginFooter />
    </div>
  </div>
</template>

<style scoped lang="scss">
// 导入全局样式变量
@use "./styles/variables.scss" as vars;

.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: vars.$light-bg-color;
  position: relative;
  overflow: hidden;
  .bg-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
        circle at 20% 30%,
        rgba(64, 158, 255, 0.1) 0%,
        transparent 20%
      ),
      radial-gradient(
        circle at 80% 70%,
        rgba(64, 158, 255, 0.1) 0%,
        transparent 30%
      );
    z-index: 0;
  }
  .login-card {
    width: 400px;
    padding: 40px 36px;
    background-color: vars.$white-color;
    border-radius: vars.$card-radius;
    box-shadow: vars.$shadow;
    position: relative;
    z-index: 1;
    &:hover {
      box-shadow: vars.$hover-shadow;
    }
    .login-tabs {
      width: 100%;
    }
  }
}

// 响应式调整
@media (max-width: 576px) {
  .login-card {
    width: 100%;
    margin: 0 20px;
    padding: 30px 24px;
  }
}
</style>
